<style lang="less">
    @import './styles/menu.less';
</style>

<template>
    <div class="menu">
        <template v-for="(item, index) in componentsList"> 
            <div :style="{background: theme.background,color:theme.color}"  class="ivu-notshrink-menu">      
                <!-- <component
                    v-show="!shrink && item.is_show"
                    :is="item.component"
                    :key="index"
                    :menu-list="menuList"      
                    @on-change="handleChange"
                    :ref="`cpt-${indexKey(index)}`"
                >
                </component> -->
                <vertical-menu
                    v-show="!shrink"
                    :menu-list="menuList"          
                    @on-change="handleChange"
                ></vertical-menu>
            </div>
        </template>
        <template> 
            <div :style="{background: theme.background}" class="ivu-shrinkable-menu">
                <sidebar-menu-shrink 
                    v-show="shrink"
                    :menu-list="menuList"          
                    @on-change="handleChange"
                ></sidebar-menu-shrink>
            </div>
        </template>
    </div>
</template>
<script>

export default {
    name: 'shrinkableMenu',
    components: {
   
    },
    data(){
        return {
          componentsList:[
            {
                component:'viewMenu',              
                is_show:false,
            },
            {
                component:'sidebarMenu',
                is_show:false,
           
            },
            {
                component:'verticalMenu',
                is_show:true,   
             },
          ],
        }
    },
    mounted() {

    },
    props: {
        theme:{
            type: Object,
            default:{}
        },
        shrink: {
            type: Boolean,
            default: false
        },
        menuList: {
            type: Array,
            required: true
        },
    },
    computed: {

    },
    methods: {
        /**
         * 生成 key 值
         */
        indexKey: function (index) {
          return index.toString()
        },
        handleChange (index) {
          this.$store.commit('increateTag', this.menuList[index].children[0])
        }
    }
};
</script>
